<template>
  <div>
    <div class="marketCapital" style="height: auto">
      <router-link to="/market"><div>市场资金 <p><span>已经连续{{fundTrends.market.days}}天{{Number(fundTrends.market.je) > 0 ? '净流入' : '净流出'}}</span>&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
      <div ref="box" style="height:2rem;width:100%"></div>
      <div class="showCenterText">
        <div class="centerText">
          流入<br/>
          {{fundTrends.market.ljbmoney | numOfLg}}
          {{fundTrends.market.ljbmoney | textOfLg}}
        </div>
        <div class="centerText">
          今日{{Number(fundTrends.market.ljjlr) > 0 ? '净流入' : '净流出'}}<br/>
          {{fundTrends.market.ljjlr | numOfLg}}
          {{fundTrends.market.ljjlr | textOfLg}}
        </div>
        <div class="centerText right">
          流出<br/>
          {{fundTrends.market.ljsmoney | numOfLg}}
          {{fundTrends.market.ljsmoney | textOfLg}}
        </div>
      </div>
      <div class="showDate">
        数据截止至 {{fundTrends.market.date | dataTimeFormatAll}} <span></span>
      </div>
      <router-link to="/stockConnect/sh"><div>沪股通资金 <p><span>今日{{Number(fundTrends.hgt.ljjlr) > 0 ? '流入':'流出'}}{{fundTrends.hgt.ljjlr | numOfLg}}{{fundTrends.hgt.ljjlr | textOfLg}}，已连续{{fundTrends.hgt.days}}天{{Number(fundTrends.hgt.je) > 0 ? '净流入':'净流出'}}</span>&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
      <router-link to="/stockConnect/sz"><div>深股通资金 <p><span>今日{{Number(fundTrends.sgt.ljjlr) > 0 ? '流入':'流出'}}{{fundTrends.sgt.ljjlr | numOfLg}}{{fundTrends.sgt.ljjlr | textOfLg}}，已连续{{fundTrends.sgt.days}}天{{Number(fundTrends.sgt.je) > 0 ? '净流入':'净流出'}}</span>&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
      <router-link to="/largeOrder"><div>大单资金 <p><span>今日{{Number(fundTrends.dd.ddljjlr) > 0 ? '流入':'流出'}}{{fundTrends.dd.ddljjlr | numOfLg}}{{fundTrends.dd.ddljjlr | textOfLg}}，结束{{fundTrends.dd.days}}天连续{{Number(fundTrends.dd.je) > 0 ? '净流入':'净流出'}}</span>&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { extend } from '@/common/common'
import { numOfLg, textOfLg } from '@/filters/legendFormat'
import { Loop } from '@/common/polling'
import { dataTimeFormatAll } from '@/filters/dataTime'
const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  color: [
    '#eb333b', '#1aae52'
  ],
  series: [
    {
      name: '流入流出',
      type: 'pie',
      hoverAnimation: false,
      clockwise: false,
      radius: ['55%', '70%'],
      avoidLabelOverlap: true,
      label: {
        normal: {
          show: false,
          position: 'center',
          textStyle: {
            fontSize: '20',
            fontWeight: 'bold'
          }
        }
      },
      data: [
        {value: 4.53, name: '流入'},
        {value: 3.08, name: '流出'}
      ]
    }
  ]
};
export default {
  name: 'capital',
  data () {
    return {
      myChart: '',
      fundTrends: {
        market: {
          days: 1,
          date: '',
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        hgt: {
          days: 1,
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        sgt: {
          days: 1,
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        dd: {
          days: 1,
          je: '',
          ljbbmoney: '',
          ljsbmoney: '',
          ddljjlr: ''
        }
      }
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.box);
  },
  filters: {
    numOfLg,
    textOfLg,
    dataTimeFormatAll
  },
  methods: {
    getWidth (num) {
      let width = (num / (Number(this.fundTrends.lastWeek.in) + Number(this.fundTrends.lastWeek.out)) * 100).toFixed(1) + '%'
      return {width: width, minWidth: '19%'}
    },
    // 获取资金动态数据
    getFundTrends () {
      let vm = this;
      remoteDAO.invoke(constant.InterfaceEnum.GET_OVER_ALL_FINANCE, null).then((result) => {
        vm.fundTrends = result;
        let object = extend(option, {
          series: [{
            data: [
              {value: result.market.ljbmoney},
              {value: result.market.ljsmoney}
            ]
          }]
        });
        vm.myChart.setOption(object)
      });
    }
  },
  created () {
    Loop.getInstance().register(this.getFundTrends);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../../assets/css/variables.less';
  .marketCapital{
    height:1.11rem;
    a{
      text-decoration: none;
      div{
        font-size: 0.16rem;
        margin: 0 auto;
        width:90%;
        height:0.55rem;
        color: #222222;
        font-family: PingFangSC-Regular;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dddddd;
        p{
          height: 100%;
          display: inline-flex;
          align-items: center;
          img{
            height: 0.16rem;
          }
          span{
            font-size: 0.12rem;
            color:#787878;
            font-family: PingFangSC-Regular;
          }
        }
      }
    }
    a:last-child{
      div{
        border-bottom: none;
      }
    }
  }
  .showDate{
    height: 0.2rem;
    width:100%;
    font-size: 0.12rem;
    margin-bottom: 0.2rem;
    color: #787878;
  }
  .showCenterText{
    width:100%;
    height: 0.5rem;
    margin-top:-1.2rem;
    margin-bottom: 0.7rem;
    .centerText{
      width:33.33%;
      float: left;
      font-size: 0.14rem;
      margin: auto;
      color:#222222;
      span{
        font-size: 0.16rem;
        color: #eb333b;
      }
    }
  }
  .right{
    span{
      color: #1aae52 !important;
    }
  }
</style>
